import React from 'react';
import * as LucideIcons from 'lucide-react';
import type { LucideIcon as LucideIconType } from 'lucide-react';

// 图标名称类型
type IconName = keyof typeof LucideIcons;

// 预设样式类型
type PresetType = 'primary' | 'danger' | 'success' | 'warning';

// 图标属性接口
interface IconProps {
  name: IconName;
  size?: number;
  color?: string;
  strokeWidth?: number;
  className?: string;
  onClick?: () => void;
  role?: string;
}

/**
 * 图标基础组件
 * @param param0 
 * @returns 
 */
const LucideIcon: React.FC<IconProps> = ({ 
  name, 
  size = 24,
  color,
  strokeWidth = 2,
  className = '',
  onClick,
  role = 'img'
}) => {
  // 修复类型问题
  const LucideIcon = LucideIcons[name] as LucideIconType;

  if (!LucideIcon) {
    console.warn(`Icon "${name}" not found`);
    return null;
  }

  return (
    <LucideIcon
      size={size}
      color={color}
      strokeWidth={strokeWidth}
      className={`inline-block ${className}`}
      onClick={onClick}
      role={role}
    />
  );
};

export default LucideIcon;

// 演示组件
// const IconDemo: React.FC = () => {
//   // 常用图标配置预设
//   const iconPresets: IconPresets = {
//     primary: "text-blue-600 hover:text-blue-700",
//     danger: "text-red-600 hover:text-red-700",
//     success: "text-green-600 hover:text-green-700",
//     warning: "text-yellow-600 hover:text-yellow-700"
//   };

//   // 点击处理函数
//   const handleClick = (action: string): void => {
//     alert(action);
//   };

//   return (
//     <div className="p-6 space-y-8">
//       {/* 基础使用 */}
//       <div className="space-y-2">
//         <h3 className="text-lg font-medium">基础图标</h3>
//         <div className="flex gap-4">
//           <Icon name="Heart" />
//           <Icon name="Share2" size={32} />
//           <Icon name="Bell" color="#6366f1" />
//           <Icon name="Star" strokeWidth={1.5} />
//         </div>
//       </div>

//       {/* 预设样式 */}
//       <div className="space-y-2">
//         <h3 className="text-lg font-medium">预设样式</h3>
//         <div className="flex gap-4">
//           <Icon name="CheckCircle" className={iconPresets.success} />
//           <Icon name="AlertCircle" className={iconPresets.warning} />
//           <Icon name="XCircle" className={iconPresets.danger} />
//           <Icon name="Info" className={iconPresets.primary} />
//         </div>
//       </div>

//       {/* 交互示例 */}
//       <div className="space-y-2">
//         <h3 className="text-lg font-medium">交互图标</h3>
//         <div className="flex gap-4">
//           <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
//             <Icon 
//               name="ThumbsUp" 
//               className="text-gray-600 hover:text-blue-600"
//               onClick={() => handleClick('点赞!')}
//             />
//           </button>
//           <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
//             <Icon 
//               name="Bookmark" 
//               className="text-gray-600 hover:text-yellow-600"
//               onClick={() => handleClick('收藏!')}
//             />
//           </button>
//         </div>
//       </div>

//       {/* 组合使用 */}
//       <div className="space-y-2">
//         <h3 className="text-lg font-medium">组合使用</h3>
//         <div className="flex gap-4">
//           <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
//             <Icon name="Send" size={18} />
//             <span>发送</span>
//           </button>
//           <button className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
//             <Icon name="Download" size={18} />
//             <span>下载</span>
//           </button>
//         </div>
//       </div>
//     </div>
//   );
// };

